<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>Responsive website template for documentations</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">    
    <link rel="shortcut icon" href="favicon.ico">  
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!-- Global CSS -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">   
    <!-- Plugins CSS -->    
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/plugins/prism/prism.css">
    <link rel="stylesheet" href="assets/plugins/lightbox/dist/ekko-lightbox.min.css">
    <link rel="stylesheet" href="assets/plugins/elegant_font/css/style.css">

    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
</head> 

<body class="body-blue">
    <div class="page-wrapper">
        <!-- ******Header****** -->
        <header id="header" class="header">
            <div class="container">
                <div class="branding">
                    <h1 class="logo">
                        <a href="index.html">
                            <span aria-hidden="true" class="icon_documents_alt icon"></span>
                            <span class="text-highlight">Pretty</span><span class="text-bold">Docs</span>
                        </a>
                    </h1>
                </div><!--//branding-->
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li class="active">Charts</li>
                </ol>
            </div><!--//container-->
        </header><!--//header-->
        <div class="doc-wrapper">
            <div class="container">
                <div id="doc-header" class="doc-header text-center">
                    <h1 class="doc-title"><span aria-hidden="true" class="icon icon_datareport_alt"></span> Charts</h1>
                    <div class="meta"><i class="fa fa-clock-o"></i> Last updated: Jan 25th, 2016</div>
                </div><!--//doc-header-->
                <div class="doc-body">
                    <div class="doc-content">
                        <div class="content-inner">
                            <section id="chartjs" class="doc-section">
                                <h2 class="section-title">Chart.js</h2>
                                <div class="section-block">
                                    <h3 class="block-title">1. Screenshot</h3>
                                    <p>The screenshots used in this page are taken from <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank">AppKit</a>. AppKit is a Bootstrap Angular admin theme.</p>
                                    <div class="screenshot-holder">
                                        <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-chart-chartjs.jpg" alt="screenshot" /></a>
                                        <a class="mask" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
                                    </div> 
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <h3 class="block-title">2. Global Configurations</h3>
                                    <p><strong><i class="fa fa-external-link-square"></i> Source:</strong> <a href="http://www.chartjs.org/docs/" target="_blank">http://www.chartjs.org/docs/</a></p>
                                    <div class="code-block">
                                        <pre><code class="language-javascript">Chart.defaults.global = {
    // Boolean - Whether to animate the chart
    animation: true,

    // Number - Number of animation steps
    animationSteps: 60,

    // String - Animation easing effect
    // Possible effects are:
    // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
    //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
    //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
    //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
    //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
    //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
    //  easeOutElastic, easeInCubic]
    animationEasing: &#x22;easeOutQuart&#x22;,

    // Boolean - If we should show the scale at all
    showScale: true,

    // Boolean - If we want to override with a hard coded scale
    scaleOverride: false,

    // ** Required if scaleOverride is true **
    // Number - The number of steps in a hard coded scale
    scaleSteps: null,
    // Number - The value jump in the hard coded scale
    scaleStepWidth: null,
    // Number - The scale starting value
    scaleStartValue: null,

    // String - Colour of the scale line
    scaleLineColor: &#x22;rgba(0,0,0,.1)&#x22;,

    // Number - Pixel width of the scale line
    scaleLineWidth: 1,

    // Boolean - Whether to show labels on the scale
    scaleShowLabels: true,

    // Interpolated JS string - can access value
    scaleLabel: &#x22;&#x3C;%=value%&#x3E;&#x22;,

    // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
    scaleIntegersOnly: true,

    // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero: false,

    // String - Scale label font declaration for the scale label
    scaleFontFamily: &#x22;&#x27;Helvetica Neue&#x27;, &#x27;Helvetica&#x27;, &#x27;Arial&#x27;, sans-serif&#x22;,

    // Number - Scale label font size in pixels
    scaleFontSize: 12,

    // String - Scale label font weight style
    scaleFontStyle: &#x22;normal&#x22;,

    // String - Scale label font colour
    scaleFontColor: &#x22;#666&#x22;,

    // Boolean - whether or not the chart should be responsive and resize when the browser does.
    responsive: false,

    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
    maintainAspectRatio: true,

    // Boolean - Determines whether to draw tooltips on the canvas or not
    showTooltips: true,

    // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
    customTooltips: false,

    // Array - Array of string names to attach tooltip events
    tooltipEvents: [&#x22;mousemove&#x22;, &#x22;touchstart&#x22;, &#x22;touchmove&#x22;],

    // String - Tooltip background colour
    tooltipFillColor: &#x22;rgba(0,0,0,0.8)&#x22;,

    // String - Tooltip label font declaration for the scale label
    tooltipFontFamily: &#x22;&#x27;Helvetica Neue&#x27;, &#x27;Helvetica&#x27;, &#x27;Arial&#x27;, sans-serif&#x22;,

    // Number - Tooltip label font size in pixels
    tooltipFontSize: 14,

    // String - Tooltip font weight style
    tooltipFontStyle: &#x22;normal&#x22;,

    // String - Tooltip label font colour
    tooltipFontColor: &#x22;#fff&#x22;,

    // String - Tooltip title font declaration for the scale label
    tooltipTitleFontFamily: &#x22;&#x27;Helvetica Neue&#x27;, &#x27;Helvetica&#x27;, &#x27;Arial&#x27;, sans-serif&#x22;,

    // Number - Tooltip title font size in pixels
    tooltipTitleFontSize: 14,

    // String - Tooltip title font weight style
    tooltipTitleFontStyle: &#x22;bold&#x22;,

    // String - Tooltip title font colour
    tooltipTitleFontColor: &#x22;#fff&#x22;,

    // Number - pixel width of padding around tooltip text
    tooltipYPadding: 6,

    // Number - pixel width of padding around tooltip text
    tooltipXPadding: 6,

    // Number - Size of the caret on the tooltip
    tooltipCaretSize: 8,

    // Number - Pixel radius of the tooltip border
    tooltipCornerRadius: 6,

    // Number - Pixel offset from point x to tooltip edge
    tooltipXOffset: 10,

    // String - Template string for single tooltips
    tooltipTemplate: &#x22;&#x3C;%if (label){%&#x3E;&#x3C;%=label%&#x3E;: &#x3C;%}%&#x3E;&#x3C;%= value %&#x3E;&#x22;,

    // String - Template string for multiple tooltips
    multiTooltipTemplate: &#x22;&#x3C;%= value %&#x3E;&#x22;,

    // Function - Will fire on animation progression.
    onAnimationProgress: function(){},

    // Function - Will fire on animation completion.
    onAnimationComplete: function(){}
}</code></pre>
                                    </div><!--//code-block-->
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                            
                            <section id="flot" class="doc-section">
                                <h2 class="section-title">Flot Charts</h2>
                                <div class="section-block">
                                    <h3 class="block-title">1. Screenshot</h3>
                                    <div class="screenshot-holder">
                                        <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-chart-flot.jpg" alt="screenshot" /></a>
                                        <a class="mask" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
                                    </div> 
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <h3 class="block-title">2. Basic Usage</h3>
                                    <p><strong><i class="fa fa-external-link-square"></i> Source:</strong> <a href="https://github.com/flot/flot/blob/master/README.md" target="_blank">https://github.com/flot/flot/blob/master/README.md</a></p>
                                    <p>Create a placeholder div to put the graph in:</p>
                                    <p><pre><code class="language-markup">&#x3C;div id=&#x22;placeholder&#x22;&#x3E;&#x3C;/div&#x3E;</code></pre></p>
                                    <p>You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:</p>
                                    <p><pre><code class="language-markup">&#x3C;div id=&#x22;placeholder&#x22; style=&#x22;width:600px;height:300px&#x22;&#x3E;&#x3C;/div&#x3E;</code></pre></p>
                                    <p>You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).</p>

                                    <p>Then when the div is ready in the DOM, which is usually on document ready, run the plot function:</p>
                                    <p><pre><code class="language-javascript">$.plot($(&#x22;#placeholder&#x22;), data, options);</code></pre></p>
                                    <p>Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the <a href="#">API reference</a>. Here's a quick example that'll draw a line from (0, 0) to (1, 1):</p>
                                    
                                    <p><pre><code class="language-javascript">$.plot($(&#x22;#placeholder&#x22;), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });</code></pre></p>
                                    <p>The plot function immediately draws the chart and then returns a plot object with a couple of methods.</p>
                                    
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                            
                            <section id="morris" class="doc-section">
                                <h2 class="section-title">Morris.js</h2>
                                <div class="section-block">
                                    <h3 class="block-title">1. Screenshot</h3>
                                    <div class="screenshot-holder">
                                        <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-chart-flot.jpg" alt="screenshot" /></a>
                                        <a class="mask" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
                                    </div> 
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <h3 class="block-title">2. Getting Started</h3>
                                    <p>Add <strong>morris.js</strong> and its dependencies (<a href="#">jQuery</a> &amp; <a href="#">Raphaël</a>) to your page.</p>
                                    <p><pre><code class="language-markup">1 &#x3C;link rel=&#x22;stylesheet&#x22; href=&#x22;//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css&#x22;&#x3E;
2 &#x3C;script src=&#x22;//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
3 &#x3C;script src=&#x22;//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js&#x22;&#x3E;&#x3C;/script&#x3E;
4 &#x3C;script src=&#x22;//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js&#x22;&#x3E;&#x3C;/script&#x3E;</code></pre></p>
                                     
                                    
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <h3 class="block-title">3. Your first chart</h3>
                                    <p>Start by adding a <code>&lt;div&gt;</code> to your page that will contain your chart. Make
sure it has an ID so you can refer to it in your Javascript later.</p>
                                    <p><pre><code class="language-markup">&#x3C;div id=&#x22;myfirstchart&#x22; style=&#x22;height: 250px;&#x22;&#x3E;&#x3C;/div&#x3E;</code></pre></p>
                                    <div class="callout-block callout-info">
                                        <div class="icon-holder">
                                            <i class="fa fa-info-circle"></i>
                                        </div><!--//icon-holder-->
                                        <div class="content">
                                            <h4 class="callout-title">Note:</h4>
                                            <p>in order to display something, you’ll need to have given the div some dimensions. Here I’ve used inline CSS just for illustration.</p>
                                        </div><!--//content-->
                                    </div>
                                    <p>Next add a <code>&lt;script&gt;</code> block to the end of your page, containing the following
javascript code:</p>
                                    <p><pre><code class="language-javascript">new Morris.Line({
  // ID of the element in which to draw the chart.
  element: &#x27;myfirstchart&#x27;,
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: &#x27;2008&#x27;, value: 20 },
    { year: &#x27;2009&#x27;, value: 10 },
    { year: &#x27;2010&#x27;, value: 5 },
    { year: &#x27;2011&#x27;, value: 5 },
    { year: &#x27;2012&#x27;, value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: &#x27;year&#x27;,
  // A list of names of data record attributes that contain y-values.
  ykeys: [&#x27;value&#x27;],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: [&#x27;Value&#x27;]
});</code></pre></p>

                                     
                                    
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                            
                            <section id="inline" class="doc-section">
                                <h2 class="section-title">Inline Charts</h2>
                                <div class="section-block">
                                    <h3 class="block-title">1. Screenshot</h3>
                                    <div class="screenshot-holder">
                                        <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-chart-inline.jpg" alt="screenshot" /></a>
                                        <a class="mask" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
                                    </div>
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <h3 class="block-title">2. Charts Used</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                                    <ul class="list list-unstyled">
                                        <li><a href="#" target="_blank"><i class="fa fa-external-link-square"></i> Peity</a></li>
                                        <li><a href="#" target="_blank"><i class="fa fa-external-link-square"></i> Easy Pie Chart</a></li>
                                        <li><a href="#" target="_blank"><i class="fa fa-external-link-square"></i> Sparklines</a></li>
                                    </ul>
                                </div><!--//section-block-->
                                <div class="section-block">
                                    <div class="jumbotron text-center">
                                        <h1>Jumbotron Example</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                                        <ul class="list list-inline center-block">
                                            <li><a class="btn btn-cta btn-pink" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="fa fa-external-link"></i> AppKit Details</a></li>
                                            <li><a class="btn btn-cta btn-primary" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="fa fa-eye"></i> AppKit Demo</a></li>
                                        </ul>
                                    </div><!--//jumbotron-->
                                </div><!--//section-->
                            </section><!--//doc-section-->

                            
                        </div><!--//content-inner-->
                    </div><!--//doc-content-->
                    <div class="doc-sidebar">
                        <nav id="doc-nav">
                            <ul id="doc-menu" class="nav doc-menu hidden-xs" data-spy="affix">
                                <li><a class="scrollto" href="#chartjs">Chart.js</a></li>
                                <li><a class="scrollto" href="#flot">Flot Charts</a></li>
                                <li><a class="scrollto" href="#morris">Morris.js</a></li>
                                <li><a class="scrollto" href="#inline">Inline Charts</a></li>
                            </ul><!--//doc-menu-->
                        </nav>
                    </div><!--//doc-sidebar-->
                </div><!--//doc-body-->              
            </div><!--//container-->
        </div><!--//doc-wrapper-->
        
        <div id="promo-block" class="promo-block promo-block-2">
            <div class="container">
                <div class="promo-block-inner">
                    <h3 class="promo-title text-center"><i class="fa fa-heart"></i> <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank">AppKit - Bootstrap Angular Admin Theme for Developers</a></h3>
                    <div class="row">
                        <div class="figure-holder col-md-5 col-sm-6 col-xs-12">
                            <div class="figure-holder-inner">
                                <a href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-dashboard-2-thumb.jpg" alt="AppKit Theme" /></a>
                                <a class="mask" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-heart pink"></i></a>
                            </div>
                        </div><!--//figure-holder-->
                        <div class="content-holder col-md-7 col-sm-6 col-xs-12">
                            <div class="content-holder-inner">
                                <div class="desc">
                                    <h4 class="content-title"><strong>Love this free documentation theme?</strong></h4>
                                    <p>Check out AppKit - an Angular admin theme I created with my developer friend <a href="https://twitter.com/tnajdek">Tom Najdek</a> for developers. AppKit uses modern front-end technologies and is packed with useful components and widgets to speed up your app development.</p>
                                    <p><strong class="highlight">[Tip for developers]:</strong> If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!</p>
                                    <a class="btn btn-cta" href="https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank">View Demo</a>
                                </div><!--//desc-->
                                <div class="author"><a href="http://themes.3rdwavemedia.com">Xiaoying Riley</a></div>
                            </div><!--//content-holder-inner-->
                        </div><!--//content-holder-->
                    </div><!--//row-->
                </div><!--//promo-block-inner-->  
            </div><!--//container-->
        </div><!--//promo-block-->
        
    </div><!--//page-wrapper-->
    
    <footer id="footer" class="footer text-center">
        <div class="container">
            <!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
            <small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="http://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
            
        </div><!--//container-->
    </footer><!--//footer-->
    
     
    <!-- Main Javascript -->          
    <script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/plugins/prism/prism.js"></script>    
    <script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>  
    <script type="text/javascript" src="assets/plugins/lightbox/dist/ekko-lightbox.min.js"></script>                                                                
    <script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
</body>
</html> 

